<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            background-color: aquamarine;
            width: 80%;
            height: 8vmin;
            margin: 10vmin auto;
            /* display: table; */
            display: flex;
        }

        li {
            /* display: table-cell; */
            line-height: 8vmin;
            text-align: center;
            display: inline-block;
            width: 20%;
        }

        li:hover {
            background-color: orangered;
        }

        .color {
            background-color: red;
        }

        .item {
            /* font-family: "华文新魏"; */
            font-size: 4em;
            font-family: "华文行楷"
        }

        .small {
            font-family: "华文行楷";
            font-size: 4em;
        }

        .main {
            width: 80%;
            height: 100px;
            margin: 0 auto;
        }

        a {
            text-decoration: none;
        }

        .tb-pick-content-item {
            background-color: #faf8f8;
            border-radius: 12px 12px 0 0;
            box-sizing: border-box;
            cursor: pointer;
            float: left;
            height: 358px;
            margin: 0 0 16px 16px;
            position: relative;
            transition: all .5s;
            width: 240px;
        }

        .item-link {
            display: inline-block;
            height: 100%;
            text-decoration: none;
            width: 100%;
        }

        .img-mask,
        .img-wrapper {
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .img-wrapper {
            background-color: #f7f7f7;
            border-radius: 12px;
            height: 240px;
            overflow: hidden;
            position: relative;
            width: 240px;
        }

        .img-mask {
            background-color: rgba(0, 0, 0, .02);
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }

        .info-wrapper {
            height: 48px;
            margin-top: 8px;
            overflow: hidden;
            width: 100%;
        }

        .info-wrapper-title {
            color: #1f1f1f;
            display: inline-block;
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
            margin-left: 8px;
            margin-right: 8px;
            max-height: 48px;
            word-break: break-all;
        }

        .tag-list {
            height: 14px;
            line-height: 14px;
            margin-left: 8px;
            margin-top: 8px;
            overflow: hidden;
        }

        .tag-text {
            color: #ff5000;
            display: inline-block;
            font-size: 14px;
            line-height: 14px;
            margin-right: 8px;
            vertical-align: top;
        }

        .price-wrapper {
            align-items: flex-end;
            display: flex;
            flex-direction: row;
            height: 24px;
            margin-left: 8px;
            margin-top: 8px;
        }

        .price-unit {
            font-size: 14px;
            line-height: 14px;
            margin-bottom: 1px;
            margin-right: 2px;
        }

        .price-unit,
        .price-value {
            color: #ff5000;
            font-family: sans-serif;
            font-weight: 700;
        }

        .price-value {
            font-size: 24px;
            line-height: 24px;
        }

        .month-sale {
            color: #7a7a7a;
            font-size: 14px;
            line-height: 14px;
            margin-bottom: 1px;
            margin-left: 8px;
        }

        .hover-border {
            border: 1px solid transparent;
            border-radius: 12px;
            box-sizing: border-box;
            height: 366px;
            left: -4px;
            position: absolute;
            top: -4px;
            width: 248px;
        }

        .item-appear {
            height: 1px;
            left: 0;
            pointer-events: none;
            position: absolute;
            top: 50%;
            width: 100%;
        }
    </style>
</head>

<body>
    <ul>
        <li class="color">空调</li>
        <li>平板电视</li>
        <li>生活电器</li>
        <li>洗衣机</li>
        <li>冰箱</li>
        <li>厨房大电</li>
    </ul>
    <div class="main">
        <div class="item" style="display: block;">
            <div class="tb-pick-content-item">
                <a href="" target="_blank" class="item-link">
                    <div class="img-wrapper" style="background-image: url(./图片/c7344ba8c559c834.jpg.avif);">
                        <div class="img-mask"></div>
                    </div>
                    <div class="info-wrapper">
                        <div class="info-wrapper-title">
                            <span class="info-wrapper-title-text">
                                小米(MI)米家 1.5匹 新一级能效 智能自清洁 巨省电 壁挂式空调挂机KFR-35GW/N1A1【国家补贴20%】
                            </span>
                        </div>
                    </div>
                    <div class="tag-list">
                        <div class="tag-text">已抵1.89元</div>
                        <div class="tag-text">包邮</div>
                    </div>
                    <div class="price-wrapper">
                        <span class="price-unit">¥</span><span class="price-value">3199.00</span>
                        <span class="month-sale">1000+人购买</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="item" style="display: none;">
            <div class="tb-pick-content-item">
                <a href="" target="_blank" class="item-link">
                    <div class="img-wrapper" style="background-image: url(./图片/46cdf4d16fa7ff57.jpg.avif);">
                        <div class="img-mask"></div>
                    </div>
                    <div class="info-wrapper">
                        <div class="info-wrapper-title">
                            <span class="info-wrapper-title-text">
                                美的空调 3匹 酷省电 家电国家补贴20% 新一级能效 省电空调立式柜机 变频冷暖 KFR-72LW/N8KS1-1P
                            </span>
                        </div>
                    </div>
                    <div class="tag-list">
                        <div class="tag-text">已抵1.89元</div>
                        <div class="tag-text">包邮</div>
                    </div>
                    <div class="price-wrapper">
                        <span class="price-unit">¥</span><span class="price-value">5599.00</span>
                        <span class="month-sale">1000+人购买</span>
                    </div>
                </a>
            </div>
            <div class="tb-pick-content-item">
                <a href="" target="_blank" class="item-link">
                    <div class="img-wrapper" style="background-image: url(./图片/O1CN01SalFLN29zGDrTzQmQ-1714128138.jpg_.webp);">
                        <div class="img-mask"></div>
                    </div>
                    <div class="info-wrapper">
                        <div class="info-wrapper-title">
                            <span class="info-wrapper-title-text">
                                小米S Pro 100 MiniLED 2025电视100英寸3864级分区以旧换新补贴
                            </span>
                        </div>
                    </div>
                    <div class="tag-list">
                        <div class="tag-text">已抵1.89元</div>
                        <div class="tag-text">包邮</div>
                    </div>
                    <div class="price-wrapper">
                        <span class="price-unit">¥</span><span class="price-value">17999</span>
                        <span class="month-sale">1000+人购买</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="item" style="display: none;">
            <div class="tb-pick-content-item">
                <a href="" target="_blank" class="item-link">
                    <div class="img-wrapper" style="background-image: url(./图片/3b914704feec2082.jpg.avif);">
                        <div class="img-mask"></div>
                    </div>
                    <div class="info-wrapper">
                        <div class="info-wrapper-title">
                            <span class="info-wrapper-title-text">
                                美的(Midea)16升燃气热水器天然气智控增压水伺服恒温【国补立减15%】 ECO节能 低水压启动JSQ30-MK6耀夜
                            </span>
                        </div>
                    </div>
                    <div class="tag-list">
                        <div class="tag-text">已抵1.89元</div>
                        <div class="tag-text">包邮</div>
                    </div>
                    <div class="price-wrapper">
                        <span class="price-unit">¥</span><span class="price-value">2199.00</span>
                        <span class="month-sale">1000+人购买</span>
                    </div>
                </a>
            </div>
            <div class="tb-pick-content-item">
                <a href="" target="_blank" class="item-link">
                    <div class="img-wrapper" style="background-image: url(./图片/O1CN015K7fNE2I696QYlMWW_!!2213269059236.jpg_.webp);">
                        <div class="img-mask"></div>
                    </div>
                    <div class="info-wrapper">
                        <div class="info-wrapper-title">
                            <span class="info-wrapper-title-text">
                                小米Redmi A75英寸144Hz高刷液晶电视L75MA-RA节能版以旧换新补贴
                            </span>
                        </div>
                    </div>
                    <div class="tag-list">
                        <div class="tag-text">已抵1.89元</div>
                        <div class="tag-text">包邮</div>
                    </div>
                    <div class="price-wrapper">
                        <span class="price-unit">¥</span><span class="price-value">17999</span>
                        <span class="month-sale">1000+人购买</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="item" style="display: none;">
            <div class="tb-pick-content-item">
                <a href="" target="_blank" class="item-link">
                    <div class="img-wrapper" style="background-image: url(./图片/f085ce79f99dc9be.jpg.avif);">
                        <div class="img-mask"></div>
                    </div>
                    <div class="info-wrapper">
                        <div class="info-wrapper-title">
                            <span class="info-wrapper-title-text">
                                美的(Midea)微碳微波炉烤箱一体机900w微波1000w烧烤平板光波速热23L容量变频臻彩荧幕 (C32)
                            </span>
                        </div>
                    </div>
                    <div class="tag-list">
                        <div class="tag-text">已抵1.89元</div>
                        <div class="tag-text">包邮</div>
                    </div>
                    <div class="price-wrapper">
                        <span class="price-unit">¥</span><span class="price-value">24549.80</span>
                        <span class="month-sale">1000+人购买</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="item" style="display: none;">
            <div class="tb-pick-content-item">
                <a href="" target="_blank" class="item-link">
                    <div class="img-wrapper" style="background-image: url(./图片/9910534bcc243548.jpg);">
                        <div class="img-mask"></div>
                    </div>
                    <div class="info-wrapper">
                        <div class="info-wrapper-title">
                            <span class="info-wrapper-title-text">
                                米家小米【国家补贴20%】501L对开门大容量家用冰箱双开门 双变频一级能效银离子除菌BCD-501WMSA
                            </span>
                        </div>
                    </div>
                    <div class="tag-list">
                        <div class="tag-text">已抵1.89元</div>
                        <div class="tag-text">包邮</div>
                    </div>
                    <div class="price-wrapper">
                        <span class="price-unit">¥</span><span class="price-value">2199.00</span>
                        <span class="month-sale">1000+人购买</span>
                    </div>
                </a>
            </div>
            <div class="tb-pick-content-item">
                <a href="" target="_blank" class="item-link">
                    <div class="img-wrapper"
                        style="background-image: url(./图片/O1CN01JsTIHv29zGDTuvVBa_!!1714128138.png_.webp);">
                        <div class="img-mask"></div>
                    </div>
                    <div class="info-wrapper">
                        <div class="info-wrapper-title">
                            <span class="info-wrapper-title-text">
                                米家小米【国家补贴20%】501L对开门大容量家用冰箱双开门 双变频一级能效银离子除菌BCD-501WMSA
                            </span>
                        </div>
                    </div>
                    <div class="tag-list">
                        <div class="tag-text">已抵1.89元</div>
                        <div class="tag-text">包邮</div>
                    </div>
                    <div class="price-wrapper">
                        <span class="price-unit">¥</span><span class="price-value">4557.00</span>
                        <span class="month-sale">1000+人购买</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="item" style="display: none;">
            <div class="tb-pick-content-item">
                <a href="" target="_blank" class="item-link">
                    <div class="img-wrapper"
                        style="background-image: url(./图片/O1CN01vtVn9l29zGBxC0jKg_!!1714128138.png_.webp);">
                        <div class="img-mask"></div>
                    </div>
                    <div class="info-wrapper">
                        <div class="info-wrapper-title">
                            <span class="info-wrapper-title-text">
                                【政府补贴至高15%】小米15手机新品新款上市小米徕卡联合研发小米官方旗舰店官网高通骁龙8至尊版国补手机
                            </span>
                        </div>
                    </div>
                    <div class="tag-list">
                        <div class="tag-text">已抵1.89元</div>
                        <div class="tag-text">包邮</div>
                    </div>
                    <div class="price-wrapper">
                        <span class="price-unit">¥</span><span class="price-value">4497.00</span>
                        <span class="month-sale">1000+人购买</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="small">
        </div>
    </div>
    <script>
        // 1.实现商品列表
        // a.点击商品加⼊购物⻋（10）
        // b.点击上⾯的tab标签进⾏切换列表（10）
        // 2. 完成购物⻋列表
        // a.全选反选（10）
        // b.数量加减以及输⼊（10）
        // c.删除单个（10）
        // d.价格计算（15）
        // e.删除选中商品（15）
        // 3. ⻚⾯样式（20）
        var lis = document.querySelectorAll('li')
        var items = document.querySelectorAll('.item')
        for (i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i)
            lis[i].onclick = function () {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = ''
                }
                this.className = 'color'
                var index = this.getAttribute('index')
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none'
                }
                items[index].style.display = 'block'
            }
        }
    </script>
</body>

</html>